<template>
  <div class="money" ref="scrollT" :style="{backgroundImage: 'url('+ cdnUrl + '/assets/money/bg.jpg' + ')'}">
    <div class="pop" v-if="!moneyFlag" :style="{backgroundImage: 'url('+ cdnUrl + '/assets/money/bg-1.png' + ')'}">
      <div class="pop-code" @click="goRefresh">
        <img :src="img" alt="" />
      </div>
      <input type="text" v-model="code" @focus="upPage" />
      <div class="pop-open" @click="openMoney">
        <img :src="cdnUrl + '/assets/money/open.png'" alt="">
      </div>
    </div>
    <div class="open" v-if="moneyFlag">
      <div class="open-face">
        <img :src="userInfo.headImgId" alt="" />
        <p>{{userInfo.nickName}}</p>
      </div>
      <div class="open-money" :class="result.code === 0? 'money1':''" >
        <p class="title" v-show="result.code === 1">获得</p>
        <p v-show="result.code === 1">{{result.money && result.money.toFixed(2)}}元</p>
        <p class="title title1" v-show="result.code === 0">没抢到！换个姿势试试</p>
      </div>
      <div class="open-btn">
        <div class="btn-unlock" v-show="type === '1' || type === '2'">
          <div class="return" @click="goReturn">
            <img :src="type === '1'? cdnUrl + '/assets/primary/result/unlock.png' : cdnUrl + '/assets/middle/unlock.png'" alt="" />
          </div>
          <div class="share" @click="showShare">
            <img :src="cdnUrl + '/assets/primary/result/share-y.png'" alt="" />
          </div>
        </div>
        <div class="btn-return" v-show="type === '3'">
          <div class="return" @click="goReturn">
            <img :src="cdnUrl + '/assets/primary/result/return.png'" alt="" />
          </div>
          <div class="share" @click="showShare">
            <img :src="cdnUrl + '/assets/primary/result/share-y.png'" alt="" />
          </div>
        </div>
      </div>
    </div>
    <Share v-if="shareFlag" @hide="hideShare"></Share>
  </div>
</template>

<script>

import { getMoney } from '../../service'
import Share from '../share/Share'
import { codeUrl, cdnUrl } from '../../service/env'

export default {
  name: 'Money',
  props: {
    type: String,
    toReturn: Function
  },
  data () {
    return {
      userInfo: JSON.parse(sessionStorage.getItem('userInfo')),
      session_id: sessionStorage.getItem('session_id'),
      img: '',
      code: '',
      moneyFlag: false,
      result: '',
      shareFlag: false,
      cdnUrl: cdnUrl
    }
  },
  components: {
    Share
  },
  mounted () {
    this.goRefresh()
  },
  methods: {
    // 刷新验证码
    goRefresh () {
      this.img = codeUrl + localStorage.getItem('session_id') + '&date=' + new Date().getTime()
    },
    // 开红包
    openMoney () {
      if (!this.code) {
        this.$toast('请输入验证码')
        return false
      }
      getMoney(this.code).then((data) => {
        if (data.success === 'false') {
          this.$toast(data.errorMsg)
          this.goRefresh()
        } else {
          this.moneyFlag = true
          this.result = data.data
        }
      })
    },
    goReturn () {
      this.$emit('toReturn')
    },
    // 分享蒙层
    showShare () {
      this.shareFlag = true
    },
    hideShare () {
      this.shareFlag = false
    },
    // 防止键盘顶页面
    upPage () {
      setTimeout(() => {
        this.$refs.scrollT.scrollTop = 0
      }, 500)
    }
  }
}
</script>

<style scoped lang="scss">
.money{
  width: 100%;
  height: 100%;
  // background: url("../../assets/money/bg.jpg") no-repeat;
  background-size: 100% 100%;
  overflow: hidden;
  .pop{
    width: 96%;
    height: 405px;
    // background: url("../../assets/money/bg-1.png") no-repeat;
    background-size: 100% 100%;
    overflow: hidden;
    margin: 50px auto 0;
    .pop-code{
      width: 100px;
      height: 33px;
      margin: 20px auto 10px;
      img{
        width: 100%;
        height: 100%;
      }
    }
    input{
      display: block;
      width: 148px;
      height: 30px;
      border: 2px solid #000000;
      border-radius: 8px;
      margin: 0 auto 9px;
      text-align: center;
      user-select: auto;
      font-size: 20px;
    }
    .pop-open{
      width: 120px;
      height: 104px;
      margin: 0 auto;
      overflow: hidden;
      img{
        width: 99px;
        height: 104px;
        float: right;
      }
    }
  }
  .open{
    width: 100%;
    height: 100%;
    .open-face{
      width: 100%;
      text-align: center;
      margin-top: 27px;
      margin-bottom: 23px;
      img{
        width: 80px;
        height: 80px;
        margin: 0 auto 6px;
        border-radius: 40px;
      }
      p{
        font-size: 15.5px;
        color: #ffffff;
      }
    }
    .open-money{
      width: 87.5%;
      height: 216px;
      background: url("../../assets/money/money.png") no-repeat;
      background-size: 100% 100%;
      margin: 0 auto;
      text-align: center;
      font-size: 30px;
      color: #000000;
      overflow: hidden;
      .title{
        margin-top: 77px;
        padding: 0 4%;
      }
      .title1{
        font-size: 20px;
      }
    }
    .money1{
      background: url("../../assets/money/money1.png") no-repeat !important;
      background-size: 100% 100% !important;
    }
    .open-btn{
      width: 100%;
      margin-top: 27px;
      .btn-unlock{
        width: 80%;
        margin: 0 auto;
        overflow: hidden;
        .return{
          float: left;
          margin-right: 3.5%;
          width: 68%;
          img{
            width: 100%;
          }
        }
        .share{
          float: left;
          width: 27%;
          img{
            width: 100%;
          }
        }
      }
      .btn-return{
        width: 60%;
        margin: 0 auto;
        overflow: hidden;
        .return{
          float: left;
          margin-right: 7%;
          width: 52%;
          img{
            width: 100%;
          }
        }
        .share{
          float: left;
          width: 37%;
          img{
            width: 100%;
          }
        }
      }
    }
  }
}
</style>
